import { cloneDeep } from 'lodash-es'
const INIITAL_FIELD = 1
// 表单基础配置
export const formBasicConfig = {
  isCol: true,
  // 是否自动设置placeholder
  autoSetPlaceholder: true,
  // 表单label宽度
  labelWidth: 120,
  labelPosition: 'top',
  size: 'default',
  disabled: false
}

// 组件基础配置
export const ComponentItems = {}

// 下拉默认值
const defaultOptions = [
  {
    label: 'option1',
    value: '1'
  },
  {
    label: 'option2',
    value: '2'
  }
]
// 级联选择器默认配置值
const cascaderOptions = [
  {
    value: 'options1',
    label: 'Options1',
    children: [
      {
        value: 'options1-1',
        label: 'options1-1',
        children: [
          {
            value: 'options1-1-2',
            label: 'options1-1-2'
          },
          {
            value: 'options1-1-3',
            label: 'options1-1-3'
          },
          {
            value: 'options1-1-4',
            label: 'options1-1-4'
          }
        ]
      }
    ]
  }
]

// 输入型组件
export const inputComponents = [
  {
    field: '',
    label: '单行文本',
    component: 'Input',
    componentName: '单行文本',
    icon: 'input',
    span: 24,
    info: '', // 说明文本
    componentProps: {
      disabled: false, // 是否禁用
      placeholder: '请输入',
      maxlength: undefined, // 最大长度
      minlength: undefined, // 最小长度
      showWordLimit: true, // 是否显示字数统计
      clearable: true, // 是否可清空
      rows: 4, // 输入框行数，仅 type 为 'textarea' 时有效
      autosize: true, // textarea 高度是否自适应，仅 type 为 'textarea' 时生效。
      readonly: false // 是否只读
    }
  },
  {
    field: '',
    label: '多行文本',
    component: 'Input',
    componentName: '多行文本',
    icon: 'textarea',
    span: 24,
    info: '',
    componentProps: {
      type: 'textarea',
      disabled: false, // 是否禁用
      placeholder: '请输入',
      maxlength: 1000, // 最大长度
      minlength: undefined, // 最小长度
      showWordLimit: true, // 是否显示字数统计
      clearable: true, // 是否可清空
      rows: 4, // 输入框行数，仅 type 为 'textarea' 时有效
      autosize: {
        // textarea 高度是否自适应，可以接受一个对象，比如: { minRows: 2, maxRows: 6 }
        minRows: 4,
        maxRows: 6
      }, // textarea 高度是否自适应，仅 type 为 'textarea' 时生效。
      readonly: false // 是否只读
    }
  },
  {
    field: '',
    label: '数字文本',
    component: 'InputNumber',
    componentName: '数字文本',
    icon: 'number',
    span: 24,
    info: '',
    componentProps: {
      disabled: false, // 是否禁用
      placeholder: '请输入',
      min: undefined, // 最小值
      max: undefined, // 最大值
      step: 1, // 计数器步长
      stepStrictly: false, // 是否只能输入 step 的倍数
      precision: undefined, // 数值精度
      clearable: true, // 是否可清空
      readonly: false, // 是否只读
      controls: true, // 是否使用控制按钮
      controlsPosition: 'right'
    }
  }
]

// 选择型组件
export const selectComponents = [
  {
    field: '',
    label: '下拉框',
    component: 'Select',
    componentName: '下拉框',
    icon: 'select',
    data: [],
    span: 24,
    info: '',
    componentProps: {
      options: cloneDeep(defaultOptions),
      disabled: false, // 是否禁用
      placeholder: '请输入',
      multiple: false, // 是否多选
      clearable: true, // 是否可清空
      filterable: true, // 是否可筛选
      readonly: false, // 是否只读
      allowCreate: false, // 是否支持输入手动创建
      valueKey: 'value', // 作为 value 唯一标识的键名，绑定值为对象类型时必填
      multipleLimit: 0, // 数量限制
      collapseTagsTooltip: true, // 超出tooltip显示
      collapseTags: true, // 多选时是否将选中值按文字的形式展示
      maxCollapseTags: 1 // 需要显示的 Tag 的最大数量 只有当 collapse-tags 设置为 true 时才会生效。
    }
  },
  {
    field: '',
    label: '级联选择',
    component: 'Cascader',
    componentName: '级联选择',
    icon: 'cascader',
    span: 24,
    info: '',
    componentProps: {
      disabled: false, // 是否禁用
      placeholder: '请选择',
      options: cascaderOptions,
      props: {
        value: 'value',
        label: 'label',
        children: 'children',
        checkStrictly: false, // 是否严格的遵守父子节点不互相关联
        emitPath: true, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
        multiple: true, // 是否多选
        disabled() {
          return false
        }
      },
      clearable: true, // 是否可清空
      filterable: true, // 是否可筛选
      showAllLevels: true, // 输入框中是否显示选中值的完整路径
      collapseTags: true, // 多选模式下是否折叠Tag
      collapseTagsTooltip: true, // collapse-tags属性必须设定为 true
      maxCollapseTags: 1 // 需要显示的 Tag 的最大数量
    }
  },
  {
    field: '',
    label: '树选择',
    component: 'TreeSelect',
    componentName: '树选择',
    icon: 'tree',
    data: [],
    span: 24,
    info: '',
    componentProps: {
      disabled: false, // 是否禁用
      showCheckbox: true,
      placeholder: '请选择',

      multiple: true,
      checkStrictly: false, // 是否严格的遵守父子节点不互相关联
      props: {
        value: 'value',
        label: 'label',
        children: 'children',
        emitPath: true, // 在选中节点改变时，是否返回由该节点所在的各级菜单的值所组成的数组，若设置 false，则只返回该节点的值
        multiple: true, // 是否多选
        disabled() {
          return false
        }
      },
      clearable: true, // 是否可清空
      filterable: true, // 是否可筛选
      showAllLevels: true, // 输入框中是否显示选中值的完整路径
      collapseTags: true, // 多选模式下是否折叠Tag
      collapseTagsTooltip: true, // collapse-tags属性必须设定为 true
      maxCollapseTags: 1 // 需要显示的 Tag 的最大数量
    }
  },
  {
    field: '',
    label: '复选框',
    component: 'CheckboxGroup',
    componentName: '复选框',
    icon: 'checkbox',
    span: 24,
    info: '',
    componentProps: {
      options: cloneDeep(defaultOptions),
      disabled: false, // 是否禁用
      placeholder: '请选择',
      min: undefined, // 可被勾选的 checkbox 的最小数量
      max: undefined // 可被勾选的 checkbox 的最大数量
    }
  },
  {
    field: '',
    label: '单选框',
    component: 'RadioGroup',
    componentName: '单选框',
    icon: 'radio',
    span: 24,
    info: '',
    componentProps: {
      options: cloneDeep(defaultOptions),
      disabled: false, // 是否禁用
      placeholder: '请选择',
      min: undefined, // 可被勾选的 checkbox 的最小数量
      max: undefined // 可被勾选的 checkbox 的最大数量
    }
  },
  {
    field: '',
    label: '开关',
    component: 'Switch',
    componentName: '开关',
    icon: 'switch',
    span: 24,
    info: '',
    componentProps: {
      disabled: false // 是否禁用
    }
  },
  {
    field: '',
    label: '日期选择',
    component: 'DatePicker',
    componentName: '日期选择',
    icon: 'date',
    lastTime: false, // 时间去23:59:59
    span: 24,
    info: '',
    options: [
      { label: '日期', value: 'data' },
      { label: '日期时间', value: 'datetime' },
      { label: '月份', value: 'month' },
      { label: '年份', value: 'year' },
      { label: '周', value: 'week' },
      { label: '日期多选', value: 'dates' }
    ],
    componentProps: {
      disabled: false, // 是否禁用
      readonly: false, // 是否只读
      placeholder: '请选择',
      editable: true, // 文本框可输入
      clearable: true, // 是否显示清除按钮
      type: 'date'
    }
  },
  {
    field: '',
    label: '日期范围',
    component: 'DatePicker',
    componentName: '日期范围',
    icon: 'date-range-field',
    lastTime: false, // 时间去23:59:59
    span: 24,
    info: '',
    options: [
      { label: '日期范围', value: 'daterange' },
      { label: '日期时间范围', value: 'datetimerange' },
      { label: '月范围', value: 'monthrange' }
    ],
    componentProps: {
      disabled: false, // 是否禁用
      readonly: false, // 是否只读
      editable: true, // 文本框可输入
      clearable: true, // 是否显示清除按钮
      startPlaceholder: '开始日期', // 范围选择时开始日期的占位内容
      endPlaceholder: '结束日期', // 范围选择时结束日期的占位内容
      type: 'daterange'
    }
  },
  {
    field: '',
    label: '时间选择',
    component: 'TimePicker',
    componentName: '时间选择',
    icon: 'time',
    lastTime: false, // 时间去23:59:59
    span: 24,
    info: '',
    componentProps: {
      disabled: false, // 是否禁用
      readonly: false, // 是否只读
      placeholder: '请选择',
      rangeSeparator: '至',
      startPlaceholder: '开始时间', // 范围选择时开始时间的占位内容
      endPlaceholder: '结束时间', // 范围选择时结束时间的占位内容
      editable: true, // 文本框可输入
      clearable: true, // 是否显示清除按钮
      isRange: false // 是否为时间范围选择
    }
  },
  {
    field: '',
    label: '时间范围',
    component: 'TimePicker',
    componentName: '时间范围',
    icon: 'time-range',
    lastTime: false, // 时间去23:59:59
    span: 24,
    info: '',
    componentProps: {
      disabled: false, // 是否禁用
      readonly: false, // 是否只读
      placeholder: '请选择',
      rangeSeparator: '至',
      startPlaceholder: '开始时间', // 范围选择时开始时间的占位内容
      endPlaceholder: '结束时间', // 范围选择时结束时间的占位内容
      editable: true, // 文本框可输入
      clearable: true, // 是否显示清除按钮
      isRange: true // 是否为时间范围选择
    }
  },
  {
    field: '',
    label: '指定时间',
    component: 'TimeSelect',
    componentName: '指定时间',
    icon: 'time',
    lastTime: false, // 时间去23:59:59
    span: 24,
    info: '',
    componentProps: {
      disabled: false, // 是否禁用
      readonly: false, // 是否只读
      placeholder: '请选择',
      rangeSeparator: '至',
      startPlaceholder: '开始时间', // 范围选择时开始时间的占位内容
      endPlaceholder: '结束时间', // 范围选择时结束时间的占位内容
      editable: true, // 文本框可输入
      clearable: true, // 是否显示清除按钮
      isRange: false // 是否为时间范围选择
    }
  },
  {
    field: '',
    label: '穿梭框',
    component: 'Transfer',
    componentName: '穿梭框',
    icon: 'transfer',
    span: 24,
    info: '',
    options: [
      { label: '保持与数据源相同的顺序', value: 'original' },
      { label: '新加入的元素排在最后', value: 'push' },
      { label: '新加入的元素排在最前', value: 'unshift' }
    ],
    componentProps: {
      disabled: false, // 是否禁用
      filterable: true,
      clearable: true, // 是否显示清除按钮
      targetOrder: 'push', // 右侧列表元素的排序策略： 若为 original，则保持与数据源相同的顺序； 若为 push，则新加入的元素排在最后； 若为 unshift，则新加入的元素排在最前
      filterPlaceholder: '请选择',
      titles: [],
      isRange: false // 是否为时间范围选择
    }
  },
  {
    field: '',
    label: '滑块',
    component: 'Slider',
    componentName: '滑块',
    icon: 'slider',
    span: 24,
    info: '',
    componentProps: {
      min: 0,
      max: 100
    }
  },
  {
    field: '',
    label: '评分',
    component: 'Rate',
    componentName: '评分',
    icon: 'rate',
    lastTime: false, // 时间去23:59:59
    span: 24,
    info: '',
    componentProps: {
      disabled: false, // 是否禁用
      allowHalf: false, // 允许半选
      max: 5, // 最大分值
      clearable: true // 是否可以重置值为 0
    }
  },
  {
    field: '',
    label: '图片上传',
    component: 'Upload',
    componentName: '图片上传',
    icon: 'picture-upload',
    info: '',
    options: [
      { label: '附件', value: 'text' },
      { label: '图片', value: 'picture' },
      { label: '图片缩略图', value: 'picture-card' }
    ],
    span: 24,
    componentProps: {
      disabled: false, // 是否禁用
      multiple: true, // 是否支持多选文件
      showFileList: true, // 是否显示已上传文件列表
      accept: '*',
      fileList: [],
      limit: undefined, // 允许上传文件的最大数量
      listType: 'text',
      httpRequest() {},
      beforeUpload() {},
      onPreview(uploadFile) {
        console.log('uploadFile', uploadFile)
      }
    }
  },
  {
    field: '',
    label: '文件上传',
    component: 'Upload',
    componentName: '文件上传',
    icon: 'file-upload',
    info: '',
    options: [
      { label: '附件', value: 'text' },
      { label: '图片', value: 'picture' },
      { label: '图片缩略图', value: 'picture-card' }
    ],
    span: 24,
    componentProps: {
      disabled: false, // 是否禁用
      multiple: true, // 是否支持多选文件
      showFileList: true, // 是否显示已上传文件列表
      accept: '*',
      fileList: [],
      limit: undefined, // 允许上传文件的最大数量
      listType: 'text',
      httpRequest() {},
      beforeUpload() {},
      onPreview(uploadFile) {
        console.log('uploadFile', uploadFile)
      }
    }
  },
  {
    field: '',
    label: '颜色',
    component: 'ColorPicker',
    componentName: '颜色',
    icon: 'color',
    span: 24,
    info: '',
    componentProps: {
      disabled: false, // 是否禁用
      showAlpha: true // 是否支持透明度选择
    }
  }
]

// 布局型组件
export const layoutComponents = [
  {
    field: '',
    label: '栅格',
    component: 'Row',
    componentName: '栅格',
    icon: 'col',
    span: 24,
    info: '',
    componentProps: {
      gutter: 20 // 间距
    }
  },
  {
    field: '',
    label: '列表',
    component: 'List',
    componentName: '列表',
    icon: 'list',
    span: 24,
    info: '',
    componentProps: {
      gutter: 20 // 间距
    }
  }
]

// 高级组件
export const highComponents = [
  {
    field: '',
    label: '富文本',
    component: 'Editor',
    componentName: '富文本',
    icon: 'editor',
    span: 24,
    info: '',
    text: '', // 说明文本
    componentProps: {}
  }
]

// 辅助类组件
export const assistComponents = [
  {
    field: '',
    label: '静态文字',
    component: 'Text',
    componentName: '静态文字',
    icon: 'static-text',
    span: 24,
    info: ''
  },
  {
    field: '',
    label: '分割线',
    component: 'Divider',
    componentName: '分割线',
    icon: 'divider',
    span: 24,
    info: '',
    options: [
      { label: '左侧', value: 'left' },
      { label: '中间', value: 'center' },
      { label: '右侧', value: 'right' }
    ],
    text: '', // 说明文本
    componentProps: {
      gutter: 20, // 间距
      contentPosition: 'left'
    }
  }
]

// 全部组件
export const allCompnents = [
  { name: '输入型组件', components: inputComponents },
  { name: '选择型组件', components: selectComponents },
  { name: '布局型组件', components: layoutComponents },
  { name: '高级组件', components: highComponents },
  { name: '辅助类组件', components: assistComponents }
]
